<template>
  <z-paging ref="paging" use-virtual-list v-model="dataList" @query="queryList">
    <view slot="top" class="paging-top">
      
      <u-navbar
        @click="backIndex"
        back-icon-color="#fff"
        title-color="#fff"
        title="我的笔记 "
        :background="background"
      >
      </u-navbar>
      <!-- <u-tabs
        :list="tabs"
        :is-scroll="true"
        :current="current"
        @change="change"
      ></u-tabs> -->
      <view class="question-bank-info">
        <view class="question-bank-name">
        {{ currentQuestionBank.name }}
      </view>
      <view class="question-bank-item">
        <text class="u-today-text">
          题目数：{{ currentQuestionBank.questionCount }}
        </text>
        <text class="u-today-text">
          更新时间：{{ currentQuestionBank.createTime }}
        </text>
      </view>
      </view>
    </view>
    <!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
    <!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
    <view slot="cell" slot-scope="{ item, index }">
      <NoteItem :data="item" @edit="handleEdit" />
    </view>
    <u-modal
      :mask-close-able="true"
      v-model="showEditModal"
      :show-cancel-button="true"
      @confirm="confirm"
      title="编辑笔记"
    >
      <view class="slot-content">
        <u-input
          class="note"
          maxlength="300"
          v-model="value"
          type="textarea"
          border
        />
      </view>
    </u-modal>
  </z-paging>

  <!-- <u-toast ref="uToast" /> -->
</template>

<script>
import { updateNote, getNotePage } from "@/api/addPaper/addpaper.js";
import NoteItem from "./NoteItem.vue";
export default {
  components: {
    NoteItem,
  },
  computed: {
    currentQuestionBank() {
      return this.$store.state.questionBank.currentQuestionBank;
    },
  },
  data() {
    return {
      background: {
        backgroundImage:
          "linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))",
      },
      currentPage: 1,
      editData: {},
      value: "",
      tabs: [
        {
          name: "全部",
        },
        {
          name: "题库分类1",
        },
        {
          name: "题库分类2",
        },
        {
          name: "题库分类3",
        },
        {
          name: "题库分类4",
        },
      ],
      current: 0,
      dataList: [],
      showEditModal: false,
    };
  },
  created() {},
  onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
    this.examPaperId = option.id;
    this.categoryId = option.categoryId;
  },
  methods: {
    change(index) {
      this.current = index;
    },
    // 我的收藏
    queryList(pageNo, pageSize) {
      getNotePage({ pageNo, pageSize, examPaperId: this.examPaperId })
        .then((res) => {
          // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
          this.$refs.paging.complete(res.data.list);
        })
        .catch((res) => {
          // 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
          // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
          // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
          this.$refs.paging.complete(false);
        });
    },
    handleEdit(data) {
      this.value = data.remark;
      this.editData = data;
      this.showEditModal = true;
    },
    async confirm() {
      await updateNote({
        id: this.editData.id,
        examPaperId: this.editData.examPaperId,
        questionId: this.editData.questionId,
        remark: this.value,
      });
      this.editData.remark = this.value;
      // this.$refs.paging.reload()
    },
  },
};
</script>

<style lang="scss" scoped>
.question-bank-info {
  padding: 20rpx;
  background-color: #f8f8f8;
  .question-bank-name {
    font-weight: 700;
  }
  .question-bank-item {
    display: flex;
    justify-content: space-between;
    color: darkgray;
    margin-top: 10rpx;

    .u-today-text {
      // padding: 10rpx 25rpx;
      font-size: 25rpx;
    }
  }
}

.slot-content {
  padding: 16px 8px;
}
</style>
